{% extends "base.html" %}

{% block title %}知了传课-注册{% endblock %}


{% block head %}
    <script src="{{ url_for('static', filename='jquery/jquery.3.6.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/register.js') }}"></script>
     <style>
        /* 样式优化 */
        #success-message {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            background-color: #dff0d8;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 20px;
            padding: 10px;
            font-weight: bold;
            color: #3c763d;
            display: none; /* 默认隐藏 */
        }
    </style>
{% endblock %}

{% block body %}
<!-- 在页面中添加一个用于显示成功消息的元素 -->
<div id="success-message" style="display: center;"></div>

 <div class="row mt-4">
            <div class="col"></div>
            <div class="col">
                <form method="POST" action="#">
                    <div class="form-group">
                        <label for="exampleInputEmail1">邮箱</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="email" value="{{ form.email.data or '' }}">
                         {% if form.email.errors %}
                        	 <div class="text-danger">{{ form.email.errors[0] }}</div>
                        {% endif %}
                        <small id="emailHelp" class="form-text text-muted">我们不会把邮箱用于其他用户</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">验证码</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="captcha" value="{{ form.captcha.data or ''}}">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" id="captcha-btn">获取验证码</button>
                            </div>
                        </div>
                         {% if form.captcha.errors %}
                        	     <div class="text-danger">{{ form.captcha.errors[0] }}</div>
                            {% endif %}
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">用户名</label>
                        <input type="text" class="form-control" name="username" value="{{ form.username.data or '' }}">
                         {% if form.username.errors %}
                        	 <div class="text-danger">{{ form.username.errors[0] }}</div>
                        {% endif %}
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" name="password" value="{{ form.password.data or '' }}">
                        {% if form.password.errors %}
                        	 <div class="text-danger">{{ form.password.errors[0] }}</div>
                        {% endif %}
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">确认密码</label>
                        <input type="text" class="form-control" name="password_again" value="{{ form.password_again.data or '' }}">
                         {% if form.password_again.errors %}
                        	 <div class="text-danger" >{{ form.password_again.errors[0] }}</div>
                        {% endif %}
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">立即注册</button>
                </form>
            </div>
            <div class="col"></div>
        </div>
{% endblock %}